<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>生成实体类</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/fileinput.min.css">
    <style>
        .bg {
            background: #ccc;
        }

    </style>
    <script src="/js/jq3.5.1.js"></script>

</head>
<body>
<div class="container" id="app" style="margin-top: 1em">
    <div class="row">
        <p class="h1">Hi,你好</p>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="input-group">
                <textarea class="form-control" aria-label="With textarea" rows="10"
                          placeholder="这里填写--模板格式" v-model="params.template"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <input id="input-id" type="file"  class="file-loading" accept=".xls,.xlsx,.txt" />
<!--            <div class="input-group">-->
<!--                <textarea class="form-control" aria-label="With textarea" rows="6"-->
<!--                          placeholder="这里填写&#45;&#45;数据源" v-model="params.soucre"></textarea>-->
<!--            </div>-->
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">类型</label>
                </div>
                <select class="custom-select" id="inputGroupSelect01" v-model="params.reqType">
                    <option value="0">请求</option>
                    <option value="1">响应</option>
                </select>
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="changeSplit">切割符</label>
                </div>
                <select class="custom-select" id="changeSplit" v-model="params.splitType">
                    <option value="0">空格</option>
                    <option value="1">tab</option>
                </select>
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="className">请求类名</span>
                </div>
                <input type="text" class="form-control" aria-label="Sizing example input"
                       aria-describedby="inputGroup-sizing-default" v-model="params.reqClassName">
            </div>

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="returnClassName">响应类名</span>
                </div>
                <input type="text" class="form-control" aria-label="Sizing example input"
                       aria-describedby="inputGroup-sizing-default" v-model="params.respClassName">
            </div>
        </div>
        <div class="col-4" id="tmpParam">
            <div class="input-group mb-3">
                <div class="input-group-prepend" id="addSpan0">
                    <span class="input-group-text">{0}</span>
                </div>
                <input type="text" class="form-control" aria-label="Sizing example input"
                       aria-describedby="inputGroup-sizing-default"></div>
        </div>
        <div class="col-4">
            <button type="button" class="btn btn-primary btn-lg" @click="addTmpParamBtn">添加模板参数</button>
            <button type="button" class="btn btn-primary btn-lg" @click="submit">生成</button>
            {{ message }}
        </div>
    </div>
</div>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            i: 0,
            addArray: [0],
            //模板参数
            params: {
                soucre: '',
                template: '',
                tempParams: [],
                reqType: 0,
                splitType: 0,
                reqClassName: '',
                respClassName: '',
            }

        },
        methods: {
            addTmpParamBtn: function () {
                let number = ++this.i;
                this.addArray.push(number)
                $("#tmpParam").append("<div class=\"input-group mb-3\"><div class=\"input-group-prepend\" id=addSpan" + number + "><span class=\"input-group-text\">{" + number + "}</span></div><input type=\"text\" class=\"form-control\" aria-label=\"Sizing example input\" aria-describedby=\"inputGroup-sizing-default\"></div>");
            },
            submit: function () {
                this.addArray.forEach(i => {
                    this.params.tempParams.push({temK: i, temV: $('#addSpan' + i).next().val()})
                })
                axios.post(
                    "http://127.0.0.1:8000/genFile",
                    this.params,
                    {
                        dataType: "json"
                    }
                ).then(res => {
                    console.log(res)
                })

            }


        }
    })
</script>


<script src="/js/jq3.5.1.js"></script>
<script src="/js/bootstrap4.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/zh.js"></script>

<script>
    $("#input-id").fileinput({
        theme: 'zh',
        uploadUrl: '', // 上传的地址
        language: 'zh', //设置语言
        showCaption: true, //是否显示标题
        uploadClass: "btn btn-default rightBtn",
        browseClass: "btn btn-primary rightBtn", //按钮样式
        maxFileCount: 2,//允许最大上传文件的数量
        minFileCount: 0,//允许最大上传文件的数量
        uploadAsync: false,//上传异步
        uploadExtraData: function () {
            return {
                paraA: 'a'
            }; //上传时额外附加参数

        },
        initialPreviewFileType: 'any', //初始化时预览文件类型
        deleteUrl: "/ada",//删除地址
        maxFileSize: "10240",//最大容量
        msgSizeTooLarge: "文件 '{name}' (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.",
        // initialCaption: "The photo"
    })
</script>
</body>
</html>
